<template>
  <div class="view-friends">
    <view-cover src="./background/girl1.jpg">
      <template #tit>友情链接</template>
    </view-cover>
    <div class="box">
      <!-- 链接组 -->
      <div class="ljz">
        <ul>
          <li v-for="friend in friends" :key="friend.id">
            <div class="avatar">
              <div class="mask"></div>
              <img :src="friend.src" />
            </div>
            <div class="info">
              <a :href="friend.href" target="_blank">{{ friend.name }}</a>
              <span>{{ friend.brief }}</span>
            </div>
          </li>
        </ul>
      </div>
      <div class="title">提交链接</div>
      <div class="add-box">
        <div class="card">
          <ul>
            <li>
              <span>链接名称</span>
              <input
                type="text"
                v-model="add.name"
                placeholder="链接名称 (必填)"
              />
            </li>
            <li>
              <span>链接地址</span>
              <input
                type="text"
                v-model="add.href"
                placeholder="链接地址 (必填)"
              />
            </li>
            <li>
              <span>链接简介</span>
              <input type="text" v-model="add.brief" placeholder="链接简介" />
            </li>
            <li>
              <span>LOGO地址</span>
              <input type="text" v-model="add.src" placeholder="LOGO图像地址" />
            </li>
            <li>
              <span></span>
              <input type="submit" @click="submit" value="提交链接" />
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ViewCover from '../../components/ViewCover.vue'
export default {
  name: 'HomeViewFriends',
  components: {
    ViewCover,
  },
  data() {
    return {
      friends: [
        {
          id: '1',
          src: '/friends/小阳.ico',
          brief: '小暖阳的博客,一款集合各种福利的网站',
          href: 'https://gitee.com/jade370/blogs',
          name: '小暖阳博客',
        },
        {
          id: '2',
          src: '/friends/小阳.ico',
          brief: '喜欢折腾,热爱PHP及WordPress,专注于技术与分享',
          href: 'https://gitee.com/jade370/blogs',
          name: 'KEKC博客',
        },
        {
          id: '3',
          src: '/friends/小阳.ico',
          brief: '年轻人的技术交流平台',
          href: 'https://gitee.com/jade370/blogs',
          name: '小梦博客',
        },
        {
          id: '4',
          src: '/friends/小阳.ico',
          brief: '生活初见设计',
          href: 'https://gitee.com/jade370/blogs',
          name: '景星博客',
        },
      ],
      add: {
        src: '',
        brief: '',
        href: '',
        name: '',
      },
    }
  },
  methods: {
    submit() {
      this.$message({
        type: 'success',
        message: '提交成功! 审核通过后就会显示喔~',
        showClose: true,
        duration: 1500,
      })
    },
  },
}
</script>

<style lang="stylus" scoped>
.view-friends
  // height: 1000px;
  // display flex
  // justify-content center
  /*   background-color: aqua; */
.box
  display flex
  flex-direction: column
  align-items center
  margin-top 20px
  .ljz
    ul
      max-width: 1270px
      min-width: 800px
      padding 15px
      display flex
      flex-direction: row;
      flex-wrap: wrap;
      justify-content space-between
      background var(--div)
      border-radius: 10px
      box-shadow: 0 1px 30px -4px var(--shadow);
      transition: all 0.5s;
      box-sizing: border-box
      transition: all 0.5s;
      &:hover
        box-shadow: 0 0px 30px -3px rgba(255, 99, 138,1);

      li
        display: flex;
        align-items: center
        width: calc(33% - 10px);
        min-width: 280px;
        border-radius: 10px;
        margin: 5px;
        background var(--mask)
        padding: 10px 0 10px 15px;
        .avatar
          position relative
          width: 50px;
          height: 50px;
          border-radius: 5px;
          overflow hidden
          // 遮罩
          .mask
            position absolute
            top 0
            left 0
            right 0
            bottom 0
            z-index: 2
            background var(--mask)
            border-radius: 5px;
            transition: all .6s
            // & + img
            //   transition: all .6s
            // &:hover + img
            //   transform: scale(1.1);
        .info
          a
            transition: all .5s
            &:hover
              color:#ff638a
        .info
          padding: 15px 15px;
          a
            font-size: 15px;
            font-weight: bold;
            color: var(--color);
            text-decoration: none;
          span
            display block
            margin-top: 5px;
            font-size: 13px;
            color: var(--color);
            opacity : 0.7
  .title
    position relative
    width: 1270px
    margin: 15px 0
    padding: 5px 30px
    font-size: 15px
    font-weight: bold
    text-align-last left
    &::before
      position: absolute;
      content: '';
      width: 4px;
      background: #ff638a
      top: 10%;
      left: 10px;
      bottom: 10%;
      border-radius: 5px;
      // box-shadow: 1px 1px 3px -1px var(--theme-color);
  // 提交链接 卡片
  .card
    width: 1270px
    padding 15px
    margin-bottom 20px
    display flex
    flex-direction: row;
    flex-wrap: wrap;
    justify-content space-between
    background var(--div)
    border-radius: 10px
    box-shadow: 0 1px 30px -4px var(--shadow);
    transition: all 0.5s;
    box-sizing: border-box
    transition: all 0.5s;
    &:hover
      box-shadow: 0 0px 30px -3px rgba(255, 99, 138,1);
    ul
      display flex
      flex-direction: column
      padding: 15px 0
      align-items center
      // justify-content center
      width 100%
      li
        display flex
        align-items center
        width: 80%
        margin-top 15px
        box-sizing: border-box
        span
          width: 100px
          margin-right 20px
          font-size: 15px
          font-weight: bold
          text-align: right
        input
          flex 1
          background var(--mask)
          height: 30px
          border 1px solid transparent
          outline: none
          padding: 0 15px
          border-radius: 10px
          box-sizing: border-box
          font-size: 16px
          color: var(--color)
          transition: all 0.5s
          &:hover
            border 1px solid rgba(255, 99, 138,0.9)
          &:focus[type='text']
            border 1px solid rgba(255, 99, 138,0.9)
            box-shadow: 0 0 2px 3px rgba(255, 99, 138,0.6);
        input[type='submit']
          background rgba(255, 99, 138, 0.2)
          color rgba(255, 99, 138, 0.8)
          font-size: 15px
          font-weight:  bold
</style>
